<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="assets/css/bootstrap1.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link href="assets/css/codemirror.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/ace.min.css"/>
    <link rel="stylesheet" href="assets/css/font-awesome.min.css"/>
    <script src="assets/js/jquery.min.js"></script>
    <script type="text/javascript">
        window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>" + "<" + "/script>");
    </script>
    <script type="text/javascript">
        if ("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
    </script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/typeahead-bs2.min.js"></script>
    <!--		<script src="assets/js/jquery.dataTables.min.js"></script>-->
    <!--		<script src="assets/js/jquery.dataTables.bootstrap.js"></script>-->
    <script type="text/javascript" src="js/H-ui.js"></script>
    <script type="text/javascript" src="js/H-ui.admin.js"></script>
    <script src="assets/layer/layer.js" type="text/javascript"></script>
    <script src="assets/laydate/laydate.js" type="text/javascript"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <title>维修人员管理</title>
</head>

<body>

<div id="app" class="page-content clearfix">
    <div id="Member_Ratings">
        <div class="d_Confirm_Order_style">

            <!--------------------------人员搜索----------------------->

            <div class="search_style">
                <div class="title_names">搜索查询</div>
                <ul class="search_content clearfix">
                    <li><label class="l_f">搜索</label><input class="inline laydate-icon" id="start"
                                                            style=" margin-left:10px;"></li>
                    <li style="width:90px;">
                        <button @click="search" type="button" class="btn_search"><i
                                class="icon-search"></i>查询
                        </button>
                    </li>
                    <!--<li>
                        每页显示行数：
                        <select @change="initData(1)" v-model="pageSize">
                            <option v-for="size in sizes">{{size}}</option>
                        </select>
                    </li>-->
                </ul>
            </div>
            <!-----------------------------人员显示信息------------------------------------>
            <div class="table_menu_list">
                <table class="table table-striped table-bordered table-hover" id="sample-table">
                    <thead>
                    <tr>

                        <th width="80px">序号</th>
                        <th width="250px">添加时间</th>
                        <th width="100px">ip地址</th>
                        <th width="100px">日志详细</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-------------------------循环人员显示---开始------------------------------------->
                    <tr v-for="workersLog,index in workersLogs">
                        <!--<td width="25px"><label><input type="checkbox" class="ace"><span class="lbl"></span></label>
                        </td>-->
                        <td width="150px">{{index+1}}</td>
                        <td width="550px">{{workersLog.inputTime.substring(0,10)}}</td>
                        <td width="100px">{{workersLog.ip}}</td>
                        <td width="100px">{{workersLog.info}}</td>
                    </tr>
                    <!-------------------------循环人员显示---结束------------------------------------->
                    </tbody>
                </table>
            </div>
<div class="row">
    <div class="col-sm-6">
        <div class="dataTables_info" id="sample-table_info" role="status" aria-live="polite">
            第{{pageInfo.pageNum}}/{{pageInfo.pages}} 页，共 {{pageInfo.total}} 条
        </div>
    </div>
    <div class="col-sm-6">
        <div class="dataTables_paginate paging_bootstrap" id="sample-table_paginate">
            <ul class="pagination">
                <li :class="{'disabled':pageInfo.pageNum==1}">
                    <a href="#" @click="initData(pageInfo.prePage)">上一页</a>
                </li>

                <li v-for="i in pageInfo.pages" @click.prevent="initData(i)"
                    :class="{'active':pageInfo.pageNum==i}">
                    <a href="#"> {{i}}</a>
                </li>

                <li :class="{'disabled':pageInfo.pageNum==pageInfo.pages}">
                    <a href="#" @click="initData(pageInfo.nextPage)">下一页</a>
                </li>
            </ul>
        </div>
    </div>
</div>


          <!--  <div class="row">
                <div class="col-sm-6">
                    <div class="dataTables_info" id="sample-table_info" role="status" aria-live="polite">
                        第{{pageInf.pageNum}}/{{pageInf.pages}} 页，共 {{pageInf.total}} 条
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="dataTables_paginate paging_bootstrap" id="sample-table_paginate">
                        <ul class="pagination">
                            <li :class="{'disabled':pageInf.pageNum==1}">
                                <a href="#" @click="initData(pageInf.prePage)">上一页</a>
                            </li>

                            <li v-for="i in pageInf.pages" @click.prevent="initData(i)"
                                :class="{'active':pageInf.pageNum==i}">
                                <a href="#"> {{i}}</a>
                            </li>

                            <li :class="{'disabled':pageInf.pageNum==pageInf.pages}">
                                <a href="#" @click="initData(pageInf.nextPage)">下一页</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>-->
        </div>
    </div>
    <!-- Form -->

</div>

</body>
</html>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            //存放后端的数据
            /*configs: [],*/
            workersLogs: [],
            //维修人员的日志表的数据(初始值)
            searchWorkersLog: {
                id: 0,
                inputTime:"",
                ip:"",
                info:""

            },
            //获得后端pageInfo里的数据
            pageInfo:{},
        },
        //created 创建
        created: function () {
            //initData  初始化数据
            this.initData(1);
        },
        //methods 方法
        methods: {
            //查询所有的配置的方法
            initData: function (pageNum) {
                axios.post("http://localhost:8080/manage/workersLog?pageNum=" + pageNum, this.searchWorkersLog)
                    .then(res => {
                        //res.data.data   res.第一个data代表的是从后台返回的一个整体数据;第二个data代表的是从后台返回的那个整体数据里的一个数据
                        this.workersLogs = res.data.data.list;
                        this.pageInfo = res.data.data;
                    })//请求成功
            },
            /*  //重置功能
              reset: function () {
                  this.searchWorkersLog.id = 0;
                  this.initData(1);
              },*/
            //根据维修人员日志的添加时间进行模糊查询的方法
            search: function () {
                this.searchWorkersLog.inputTime = document.getElementById("start").value;
                this.initData(1);

            },
        }
    });
</script>


<!--<script>
    var app = new Vue({
        el: "#app",
        data: {
            pageInf: {},
            workersInf: [],
            pageSize: 10,
            sizes: [3, 5, 10, 15, 20, 25, 30],

        },
        created: function () {
            this.initData(1);
        },
        methods: {
            //获得所有的员工信息
            initData(pageNum) {
                console.log(pageNum);
                axios.get("http://localhost:8080/manage/showWorkersList?pageNum=" + pageNum + "&pageSize=" + this.pageSize).then(
                    res => {
                        this.pageInf = res.data.data;
                        this.workersInf = res.data.data.list;
                        console.log(this.workersInf);
                    });
            }
        }
    })
</script>-->


<script>
    jQuery(function ($) {


        $('table th input:checkbox').on('click', function () {
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
                .each(function () {
                    this.checked = that.checked;
                    $(this).closest('tr').toggleClass('selected');
                });

        });


        $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});

        function tooltip_placement(context, source) {
            var $source = $(source);
            var $parent = $source.closest('table')
            var off1 = $parent.offset();
            var w1 = $parent.width();

            var off2 = $source.offset();
            var w2 = $source.width();

            if (parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2)) return 'right';
            return 'left';
        }
    });


    /*用户-查看*/
    function member_show(title, url, id, w, h) {
        layer_show(title, url + '#?=' + id, w, h);
    }

    /*用户-停用*/
    function member_stop(obj, id) {
        layer.confirm('确认要停用吗？', function (index) {
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this,id)" href="javascript:;" title="启用"><i class="icon-ok bigger-120"></i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
            $(obj).remove();
            layer.msg('已停用!', {icon: 5, time: 1000});
        });
    }

    /*用户-启用*/
    function member_start(obj, id) {
        layer.confirm('确认要启用吗？', function (index) {
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs btn-success" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="icon-ok bigger-120"></i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
            $(obj).remove();
            layer.msg('已启用!', {icon: 6, time: 1000});
        });
    }

    /*用户-删除*/
    function member_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            $(obj).parents("tr").remove();
            layer.msg('已删除!', {icon: 1, time: 1000});
        });
    }

    laydate({
        elem: '#start',
        event: 'focus'
    });

</script>














